<template>
	<div>
		<div class="editMaterial" style="margin-top: 0;">
			<p>
				<span>物料名称</span>
				<i class="BtnMaterName" @click="BtnMaterClick"><input v-model="materialName" class="materialName" placeholder="请选择物料"
					 disabled="disabled" /></i>
			</p>
			<p>
				<span>混合物料</span>
				<input v-model="isHunhe" class="isHunhe" disabled="disabled" />
			</p>
			<div class="handBtn" v-if="Hunhe">
				<div class='handBtnList' v-for="(item,index) in list2" :key=index>
					<p>
						<span>{{item.materialName}}</span>
						<input type='tel' v-model="fixPercent[index]" class='Num' maxlength='2' />%
					</p>
				</div>
			</div>
			<p>
				<span>物料重量</span>
				<input type="tel" v-model="counts" class="materialNum" placeholder="请填写物料重量" style="width: 9rem;" />
				<em>吨</em>
			</p>
			<p>
				<span>物料单价</span>
				<input type="tel" v-model="unitPrice" placeholder="请填写物料单价" class="materialUnit" />
				<em>元/吨</em>
			</p>
			<p>
				<span>含杂不超</span>
				<input type="tel" v-model="zizhiPercent" maxlength="2" id="" value="" placeholder="含杂比例不超过" class="proportion" />
				<em>%</em>
			</p>
			<!--<p>
				<span>利润率</span>
				<input type="" name="" id="" value="" class="rate"/>
				<em>%</em>
			</p>-->
			<div class="demos-content-padded" style="margin-top: 1.5rem;">
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" style="float: left;background: #e5e5e5;">取消</a>
				<a href="javascript:;" @click="confimClick" class="weui-btn weui-btn_mini weui-btn_primary" style="float: right;margin-top: 0;background: #28c81e;">确定</a>
			</div>
		</div>
		<div class="thooseMaterial" v-show="isShow">
			<p>选择物料</p>
			<span @click="chaClick">X</span>
			<ul class="ul_warp">
				<li v-for="(item,index) in list" :key=index @click="childClick(item.materialNo,item.materialName,item.isHunheLabel)">{{item.materialName}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		getStore
	} from '../../config/mUtils'
	import {
		getTopMaterialList,
		getNextMaterialList,
		getGroupMaterialList,
		addOrEditMaterial
	} from '../../config/api'
	export default {
		data() {
			return {
				SupplierId: getStore("SupplierId"),
				orderNo: this.$route.query.orderNo,
				orderid: this.$route.query.orderid,
				list: '',
				Hunhe:false,
				isHunhe: '',   //是否是混合物
				isShow: false,
				materialName: '',   //物料名
				list2:'',         
				materialNo:'',   //物料编号
				counts:'',    //物料重量
				unitPrice:'',   //价格
				zizhiPercent:'',  //杂质比例
				fixNo:'',    //混合物料的物料编号集合
				fixPercent:[],
			}
		},
		created() {

		},
		methods: {
			childClick(materialNo, name, isHunhe) {
				this.materialName = name
				this.isHunhe = isHunhe
				this.materialNo = materialNo
				if (isHunhe == '是') {
					this.Hunhe = true
					console.log(this.Hunhe)
					getGroupMaterialList(materialNo).then(res => {
						if (res.code == 100) {
							this.list2 = res.content
							for(let i=0;i<res.content.length;i++){
								this.fixNo += res.content[i].materialNo + ","
							}
							this.isShow = false
						} else {
							this.isShow = false
							this.list2 = ""
						}
					})
				} else {
					this.Hunhe = false
					getNextMaterialList(materialNo).then(res => {
						console.log(res)
						if (res.code == 100) {
							this.list = res.content
						} else {
							this.isShow = false
							this.list = ""
						}
					})
				}
			},
			BtnMaterClick() {
				this.isShow = true
				getTopMaterialList(this.orderNo, this.SupplierId).then(res => {
					console.log(res)
					if (res.code == 100) {
						this.list = res.content
					}
				})
			},
			confimClick() {
				if(this.isHunhe=="是"){
					addOrEditMaterial(this.SupplierId,this.orderNo,this.materialNo,this.counts,this.unitPrice,this.fixNo,this.fixPercent.join(','),this.zizhiPercent).then(res=>{
						if(res.code==100){
							this.$router.push({
								path:"/materialList",
								query:{
									orderNo:res.content,
									orderid:res.content
								}
							})
						}
					})
				}else{
					addOrEditMaterial(this.SupplierId,this.orderNo,this.materialNo,this.counts,this.unitPrice,this.fixNo,this.fixPercent.join(','),this.zizhiPercent).then(res=>{
						console.log(res)
						this.$router.push({
							path:"/materialList",
							query:{
								orderNo:res.content,
								orderid:res.content
							}
						})
					})
				}		
			},
			chaClick(){
				this.isShow = false
			}
		},
	}
</script>

<style scoped="scoped">
	.thooseMaterial {
		position: fixed;
		top: 20%;
		left: 3.375rem;
		width: 12rem;
		height: 14rem;
		border: 1px solid #e2e2e2;
		background: #fff;
		border-radius: 0.5rem;
	}

	.thooseMaterial p {
		height: 2rem;
		line-height: 2rem;
		background: #28C81E;
		text-align: center;
		color: #fff;
		position: relative;
	}

	.thooseMaterial span {
		position: absolute;
		right: 0.5rem;
		top: 0.4rem;
		color: #fff;
	}

	.thooseMaterial ul {
		height: 12rem;
		overflow-y: scroll;
	}

	.thooseMaterial ul li {
		width: 8rem;
		height: 1.5rem;
		line-height: 1.5rem;
		text-align: center;
		color: #000;
		font-size: 0.65rem;
		margin: 0.5rem auto;
		border: 1px solid #e2e2e2;
	}

	.handBtn {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.editMaterial p input {
		padding: 8px 4px;
	}

	.handBtn .handBtnList p {
		width: 100%;
		padding: 0 5%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.65rem;
	}

	.handBtn .handBtnList p span {
		width: 11rem;
	}

	.handBtn .handBtnList p input {
		border: 1px solid #e2e2e2 !important;
		background-color: #fff;
		width: 3rem;
		font-size: 0.65rem !important;
		padding: 0.1rem 0.3rem;
		box-sizing: border-box;
	}
</style>
